<style lang="scss" scoped>
.head-box {
  display: flex;
  width: 100%;
  padding: 0.2rem 0.3rem;
  background-color: #ffffff;
  .avatar {
    display: flex;
    flex-basis: 30%;
    align-items: center;
    justify-content: flex-start;
  }
  .infomation {
    display: flex;
    flex-basis: 50%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 0.2rem;
    font-size: 0.28rem;
    .name {
      font-size: 0.34rem;
      padding-bottom: 0.2rem;
    }
  }
  .edit {
    display: flex;
    flex-basis: 20%;
    align-items: center;
    justify-content: flex-end;
  }
}
.logout-box {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 100%;
  padding: 0 .2rem;
}
</style>

<template>
  <div class="container hasNav hasTabbar">
    <van-nav-bar title="个人中心" fixed />
    <div class="head-box">
      <div class="avatar">
        <van-image width="1.6rem" height="1.6rem" :src="form.headPic" round ></van-image>
      </div>
      <div class="infomation">
        <p class="name">{{ form.username || '' }}</p>
        <p>用户账号：{{ form.mobile || '' }}</p>
      </div>
      <div class="edit" @click="$router.push('/user/userInfo')">
        <van-icon name="arrow" size="0.3rem" />
      </div>
    </div>
    <van-cell icon="orders-o" title="我的预约" is-link to="/reservation/list" />
    <van-cell icon="user-o" title="个人资料" is-link to="/user/userInfo" />
    <van-cell icon="edit" title="修改密码" is-link to="/editPassword" />
	  <van-cell icon="phone-o" title="联系我们" is-link to="/common/about" />
    <div class="logout-box">
      <van-button type="default" color="#d24a58" block @click="logout">退出</van-button>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Tabbar from '@/components/Tabbar';
const fileUrl = process.env.VUE_APP_FILE_URL;

function isNull(val) {
  return val === '' || !val
}

export default {
  name: 'UserIndex',
  components: {
    Tabbar
  },
  data() {
    return {
      form: {
        headPic: null,
        username: null,
        mobile: null,
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    async getDetail() {
      try {
        let userInfo = JSON.parse(JSON.stringify(this.userInfo))
        this.form.headPic = !isNull(userInfo.user.headPic) ? fileUrl + userInfo.user.headPic : '';
        this.form.username = !isNull(userInfo.user.username) ? userInfo.user.username : '';
        this.form.mobile = !isNull(userInfo.user.mobile) ? userInfo.user.mobile : '';
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },

    logout(){
      this.$store.dispatch('handleLogout');
      this.$toast('退出成功');
      this.$router.replace('/');
    }
  }
};
</script>
